<template>
    <el-form :data="form">
        <el-form-item label="商品名称">
            <el-input v-model="form.keyword" />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-button @click="searchHandle">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="list">
        <el-table-column prop="name" labe="产品名称" />
        <el-table-column prop="description" label="产品介绍" />
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="pageChangeHandle"
            @current-change="pageSizeChangeHandle" />
    </ElConfigProvider>
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable';
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { reactive } from 'vue';
import { getProductListAPI } from "./api"

const form = reactive({
    keyword: ""
})

const {
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
} = useTable(getProductListAPI, form)
</script>
<style lang="less" scoped>

</style>